<template>
    <div class="box">
      <!-- 搜索框 -->
      <el-input v-model="input2" class="w-50 m-2" placeholder="输入姓名查询内容" style="width: 300px;">
        <template #suffix>
          <el-icon @click="icon">
            <Search />
          </el-icon>
        </template>
      </el-input>
      <!-- 表格 -->
      <el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%">
        <el-table-column type="index" width="100" label="序号" />
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="account" label="账号" width="100" />
        <el-table-column prop="role" label="权限" width="200" />
        <el-table-column prop="tel" label="电话" width="200" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button style="width: 60px;" @click="change2(scope)" v-focus>修改</el-button>
            <el-button style="width: 60px;" type="primary" @click="change(scope)" v-focus>添加</el-button>
            <el-button style="width: 60px;" type="danger" @click="del" v-focus v-admin>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页符 -->
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="page"
        layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
  
      <!-- 弹出编辑页面 -->
      <el-drawer v-model="visible" :show-close="false" size="25%">
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">{{ values }}</h4>
          <el-button type="danger" @click="close" style="width: 100px;">
            <el-icon class="el-icon--left">
              <CircleCloseFilled />
            </el-icon>
            关闭页面
          </el-button>
        </template>
        <!-- 抽屉里面的输入框 -->
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="60px" class="demo-ruleForm">
          <el-form-item label="名字" prop="name">
            <el-input v-model="ruleForm.name" type="text" autocomplete="off" :disabled="disabled" />
          </el-form-item>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="ruleForm.tel" type="text" autocomplete="off" :disabled="disabled" />
          </el-form-item>
          <el-form-item label="账号" prop="text">
            <el-input v-model="ruleForm.text" type="text" autocomplete="off" :disabled="disabled" />
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input v-model="ruleForm.pass" type="password" autocomplete="off" :disabled="disabled" />
          </el-form-item>
          <!-- 抽屉里的下拉菜单 -->
          <el-form-item label="权限">
            <el-select v-model="ruleForm.role" placeholder="权限">
              <el-option label="超级管理员" value="super" />
              <el-option label="普通管理员" value="admin" />
              <el-option label="员工" value="emp" />
            </el-select>
          </el-form-item>
          <!-- 抽屉里面的按钮 -->
        </el-form>
        <el-button type="primary" plain style="width: 100px;" class="but" @click="butchange">{{ values }}</el-button>
      </el-drawer>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ElNotification, ElButton, ElDrawer, ElMessage, ElMessageBox } from 'element-plus'
  import { getAPI, addAPI, changeAPI, delAPI } from "@/api/axios.ts";
  import { reactive, ref, Ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { CircleCloseFilled } from '@element-plus/icons-vue'
  // 渲染数据的泛型
  interface Itable {
    id?: number
    account?: string,
    isdel?: string,
    password?: string,
    oldPassword?: string,
    regtime?: string,
    role?: string,
    tel?: string,
  }
  // 数据
  let total: Ref<number> = ref<number>(1)
  let tableData: Ref<Array<Itable>> = ref<Array<Itable>>([])
  // 获取管理员列表数据
  function getdata() {
    getAPI({
      currentPage: sessionStorage.getItem('size') || 1,
      pageSize: sessionStorage.getItem('page') || 5
    }).then((res: any) => {
      console.log(res.data);
      console.log(res.data.total);
      total.value = res.data.total
  
      if (res.data.code == 2000) {
        tableData.value = res.data.data
      }
    })
  }
  getdata()
  
  // 分页操作
  let currentPage4 = ref<number>(JSON.parse(sessionStorage.getItem('size')) || 1)
  let pageSize4 = ref<number>(JSON.parse(sessionStorage.getItem('page')) || 5)
  let page = ref<Array<number>>([5, 8, 10, 12])
  
  function handleSizeChange(page: any) {
    // console.log(page);
    sessionStorage.setItem('page', page)
    getdata()
  }
  function handleCurrentChange(size: any) {
    // console.log(size);
    sessionStorage.setItem('size', size)
    getdata()
  }
  const visible: Ref<boolean> = ref<boolean>(false)
  
  let disabled: Ref<boolean> = ref<boolean>(false)
  // 点击修改按钮
  let values = ref<string>('')
  function change2(scope: any) {
    console.log(scope.row);
    sessionStorage.setItem("id", scope.row.id)
    visible.value = true
    values.value = '修改管理员'
    // 数据回显
    ruleForm.value.name = scope.row.name
    ruleForm.value.tel = scope.row.tel
    ruleForm.value.role = scope.row.role
    ruleForm.value.text = scope.row.account
    ruleForm.value.pass = scope.row.password
    disabled.value = true
  }
  
  
  let ruleForm: Ref<Array<Iadd>> = ref<Array<Iadd>>([])
  // 点击添加按钮
  function change(scope: any) {
    console.log(scope.row);
    sessionStorage.setItem("id", scope.row.id)
    visible.value = true
    console.log(scope);
    values.value = '添加管理员'
  }
  // 添加的数据泛型
  interface Iadd {
    pass: string,
    text: string,
    name: string,
    role: string,
    tel: string,
    id: string,
  }
  // 点击抽屉里面的按钮
  function butchange() {
    // 如果点击的是添加管理员
    if (values.value == '添加管理员') {
      console.log(ruleForm.value);
      // 发送添加请求
      addAPI({
        account: ruleForm.value.pass,
        password: ruleForm.value.text,
        name: ruleForm.value.name,
        tel: ruleForm.value.tel,
        role: ruleForm.value.role,
      }).then(res => {
        // console.log(res.data);
        if (res.data.code == 2000) {
          getdata()
          ElNotification({
            title: '成功',
            message: '添加管理员成功',
            type: 'success',
          })
        } else {
          ElNotification({
            title: '失败',
            message: res.data.msg,
            type: 'error',
          })
        }
      })
  
    } else
      // 如果点击的是修改管理员
      if (values.value == '修改管理员') {
        changeAPI({
          id: sessionStorage.getItem('id'),
          name: ruleForm.value.name,
          tel: ruleForm.value.tel,
          role: ruleForm.value.role,
        }).then(res => {
          // console.log(res);
          if (res.data.code == 2000) {
            getdata()
            ElNotification({
              title: '成功',
              message: '修改管理员成功',
              type: 'success',
            })
          } else {
            ElNotification({
              title: '失败',
              message: res.data.msg,
              type: 'error',
            })
          }
        })
  
  
      }
  }
  const ruleFormRef = ref<FormInstance>()
  
  // 点击删除按钮
  function del() {
    delAPI({
      id: sessionStorage.getItem('id')
    }).then(res => {
      // console.log(res);
      if (res.data.code == 2000) {
        getdata()
        ElMessageBox.confirm(
          '确定要删除这个管理员吗?',
          '删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除',
            })
          })
      }
    })
  }
  
  // 搜索查询框
  const input2: Ref<string> = ref<string>('')
  // 点击放大镜查询管理员
  function icon() {
    getAPI({
      name: input2.value
    }).then(res => {
      console.log(res);
      if (res.data.code == 2000) {
        tableData.value = res.data.data
      }
    })
  
  }
  // 抽屉的输入框限制
  const rules = reactive<FormRules<typeof ruleForm>>({
    pass: [{ required: true, message: '密码不能为空' }],
    text: [{ required: true, message: '账号不能为空' }],
    name: [{ required: true, message: '姓名不能为空' }],
    tel: [{ required: true, message: '电话不能为空' }],
    id: [{ required: true, message: 'ID不能为空' }],
  })
  
  
  
  </script>
  
  <style scoped>
  .w-50 {
    margin-top: 30px;
    margin-left: 10px;
  }
  
  .el-pagination {
    margin-top: 30px;
  }
  
  .but {
    margin-left: 60px;
    margin-top: 20px;
  }
  
  .el-select {
    width: 100%;
  }
  
  .el-table {
    margin-top: 30px;
  }
  
  .box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
  }
  
  .el-button {
    width: 100%;
  }
  </style>
  
  